<template>
  <el-dialog
    append-to-body
    v-if="visible"
    :title="titleText"
    :width="width + '%'"
    :top="top + 'vh'"
    :modal="showModal"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
    class="wp-dialog__panel"
  >
    <el-form
      ref="purchaseOrderInfoForm"
      :model="purchaseOrderInfo"
      label-position="right"
      label-width="120px"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="采购单号" prop="purchaseNo" :rules="[{ required: policy==2, message: '不能为空', trigger: 'blur' }]">
            <el-radio v-model="policy" label="1" border size="mini">自动生成</el-radio>
            <el-radio v-model="policy" label="2" border size="mini">手动输入</el-radio>
            <el-input
              v-if="policy==2"
              class="wp-form-280"
              v-model.trim="purchaseOrderInfo.purchaseNo"
              placeholder="采购单号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采购日期" prop="purchaseDate">
            <el-date-picker
              style="width:280px"
              v-model="purchaseOrderInfo.purchaseDate"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplierName">
            <Supplier-info :supplierCode.sync="purchaseOrderInfo.supplierCode" :supplierName.sync="purchaseOrderInfo.supplierName"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="chargePerson">
          <Employee-seach :employeeCode.sync="purchaseOrderInfo.chargePerson" :employeeName.sync="purchaseOrderInfo.chargePersonName"/>
           </el-form-item>
        </el-col>
      </el-row>
      <el-row>
         <el-col :span="12">
          <el-form-item label="采购金额" prop="purchaseAmount">
            <el-input
              v-model.trim="purchaseOrderInfo.purchaseAmount"
              class="wp-form-280"
              placeholder="采购金额"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model.trim="purchaseOrderInfo.remark"
              class="wp-form-280"
              placeholder="备注"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <Product-info ref="productInfoRef" :orderActualAmount.sync="purchaseOrderInfo.purchaseActualAmount"  :list.sync="porductList" :updateOption="false" />
    <div slot="footer" class="wp-footer__box">
      <el-button @click.native="close">取消</el-button>
      <el-button
        type="warning"
        @click.native="save(1)"
        >保存提交</el-button>
              <el-button
        type="success"
        @click.native="save(0)"
        >保存草稿</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ProductInfo from './detial/productInfo'
import SupplierInfo from './detial/SupplierInfo'
import EmployeeSeach from '@/views/components/EmployeeSeach'
import Mixins from './mixins'
export default {
  props: {
    title: String,
    top: { type: Number, default: 2 },
    width: { type: Number, default: 80 },
    show: { type: Boolean, default: false },
    showModal: { type: Boolean, default: true }
  },
  mixins: [Mixins],
  components: { ProductInfo, SupplierInfo, EmployeeSeach },
  watch: {
    show (nVal) {
      this.visible = nVal
    },
    visible (nVal) {
      this.$emit('update:show', nVal)
    },
    data: {
      handler (nVal) {
        this.orderInfo = nVal
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      id: 'order_detail',
      activeNames: ['1'],
      policy: '1',
      visible: this.show,
      purchaseOrderInfo: {
        purchaseActualAmount: 0
      },
      porductList: [],
      height: 100,
      titleText: this.title,
      rules: {
        purchaseDate: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        chargePerson: [{required: true, message: '不能为空', trigger: 'blur'}],
        supplierName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    close () {
      this.visible = false
    },
    open (title, data) {
      this.visible = true
      this.titleText = title || ''
      this.purchaseOrderInfo = data || {}
    },
    save (status) {
      this.$refs.purchaseOrderInfoForm.validate((valide) => {
        if (valide && this.checkPorductList(this.porductList)) {
          this.purchaseOrderInfo.purchaseOrderDetailInfoList = this.porductList
          this.purchaseOrderInfo.status = status
          if (status === 1) {
            this.$msgBox.confirm('提交后不可修改', () => {
              this.requestOption('addOrder', this.purchaseOrderInfo, (res) => {
                this.close()
                this.$parent.initPageList()
              })
            })
          } else {
            this.requestOption('addOrder', this.purchaseOrderInfo, (res) => {
              this.close()
              this.$parent.initPageList()
            })
          }
        }
      })
    },
    checkPorductList (porductList) {
      let validte = true
      if (porductList <= 0) {
        this.$msgBox.error('请添加产品')
        validte = false
      } else {
        for (let index = 0; index < porductList.length; index++) {
          const product = porductList[index]
          if (!product.productNum) {
            this.$msgBox.error('产品数量不能为空')
            validte = false
            break
          } else if (!product.price) {
            this.$msgBox.error('采购单价不能为空')
            validte = false
            break
          }
        }
      }
      return validte
    },
    handleChange (activeNames) {
      if (!activeNames.includes('1')) {
        console.log(activeNames)
        this.height = 300
      } else {
        this.height = 100
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-footer__box {
  text-align: center;
}
</style>
